<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
  </style>
</head>
<body>
选择要上传的文件：<br/>
<input type="file" name="file" id="myFile"/><span></span>
<div id="bar">
  上传进度:
  <progress id="pro" value="0"></progress>
</div>
<div>
  <img src=""  id="myImg" width="64" height="64"/>
</div>

</body>
<script src="../js/jquery.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>


  var myFile = document.getElementById("myFile");
  //绑定事件(ECMAScript6写法)
  myFile.addEventListener("change", () => {
    var file = myFile.files[0];
    //预览图片函数
    previewWithObjectURL(file);
  })
  //简单的图片预览建议使用第一种方式
  //URL方式（第一种方式）src = blob:http://localhost:8080/f720711f-57e2-428f-8a47-ec59e5dbbc10
  function previewWithObjectURL(file) {
    var url = URL.createObjectURL(file);
    var reader = new FileReader();
    reader.readAsDataURL(file);
    //请求完成后,显示图片
    reader.onloadend = function (event) {
      document.getElementById("myImg").src = url;
    }
    //上传过程中动态显示进度条
    reader.onprogress = function (event) {
      if (event.lengthComputable) {
        document.getElementById("pro").value = event.loaded / event.total;
      }
    }
  }
  
  function parseDate() {
    
  }
</script>
</html>